// 根据useType动态渲染popup内容
// useType
// 0:排车重复(，2: 短租(),4: 车辆维修,5: 车辆保养,6: 车辆年检,9车辆丢失（移除） 11:临时占用,12:借出
// ————————————
// 自测指南
// 排车重复：展示多个订单信息，和租期
// 短租：分为线下和渠道（标题展示渠道名称）
// 4、5、6逻辑相同
// 9车辆丢失 不可点击、不弹出popup
// 11、12 v5.7.1增加

import OrderCodeLink from '@/components/main/order-code-link'

// 获取列
function getColumns(useType: number, useTypeName: string, data: any) {
  data.range = data.fromTime?.slice(0, 16) + ' 至 ' + data.toTime?.slice(0, 16)
  data.lease = data.orderStartTime?.slice(0, 16) + ' 至 ' + data.orderEndTime?.slice(0, 16)
  data.client = data.clientName + '（' + data.memberPhone + '）'

  // 短租
  if (useType == 2) {
    const columns = [
      { label: '短租订单号', value: 'orderCode', useType },
      { label: '租赁周期', value: 'lease' },
      { label: '占用时间', value: 'range' },
      { label: '取车门店', value: 'siteName' },
      { label: '还车门店', value: 'returnSiteName' },
    ]
    if (data.channelOrderCode) {
      columns.push({ label: '渠道订单号', value: 'channelOrderCode' })
    }
    columns.push({ label: '承租人', value: 'client' })
    if (data.channelModelName) {
      columns.push({ label: '渠道下单车型', value: 'channelModelName' })
    }
    columns.push({ label: '系统下单车型', value: 'orderModelName' })
    return columns
    // 维修、保养、年检
  } else if (useType == 4 || useType == 5 || useType == 6) {
    const noTitle = useTypeName.slice(-2) + '单号'
    return [
      { label: noTitle, value: 'orderCode', useType },
      { label: '占用时间', value: 'range' },
      { label: '负责人', value: 'undertaker' },
    ]
    // 长租
  } else if (useType == 3) {
    const columns = [
      { label: '长租订单号', value: 'orderCode', useType },
      { label: '占用时间', value: 'range' },
      { label: '取车门店', value: 'siteName' },
      { label: '还车门店', value: 'returnSiteName' },
      { label: '承租人', value: 'client' },
      { label: '系统下单车型', value: 'orderModelName' },
    ]
    return columns
    // 临时占用
  } else if (useType == 11) {
    const columns = [
      { label: '临时占用ID', value: 'orderCode', useType },
      { label: '占用时间', value: 'range' },
      { label: '占用原因', value: 'remark' },
      { label: '操作时间', value: 'createTime' },
      { label: '操作人', value: 'createUser' },
    ]
    return columns
    // 借出
  } else if (useType == 12) {
    const columns = [
      { label: '调车单号', value: 'orderCode', useType },
      { label: '借调周期', value: 'range' },
      { label: '同行', value: 'industryName' },
    ]
    return columns
  }
  return [
    { label: '订单号', value: 'orderCode' },
    { label: '占用时间', value: 'range' },
  ]
}

export default function FlyBarTooltip(value: any) {
  const { data, onRemoveTempUseFn, isSelector } = value

  // bar类型, 网点车型占用类型、网点车型占用类型中文
  const { type: barType, useType, useTypeName, channelTypeName, repeatList } = data

  // 逾期标签 逾期未还、借调未还
  let tag = ''
  if (barType == 4 || barType == 9) {
    tag = '逾期'
  }
  if (data.typeSet.includes(5)) {
    if (tag) {
      tag += ' | '
    }
    tag += '冲突'
  }

  // 标题
  let title = useTypeName
  if (channelTypeName) {
    title = channelTypeName + '订单'
  }
  const columns = getColumns(useType, useTypeName, data)

  const slots = {
    title: () => (
      <div style="position: relative; ">
        {title}{' '}
        <a-button
          v-show={useType == 11 && !isSelector}
          v-permission={'svms:asstes:car:stock.removeTempUse'}
          onClick={() => onRemoveTempUseFn(data.id)}
          style="position: absolute;right:0"
          type="primary"
          status="warning"
          size="mini"
        >
          释放库存
        </a-button>
      </div>
    ),
  }

  return (
    <a-descriptions v-slots={slots} title={title} size="mini" column={1} bordered style="width: 300px">
      {columns.map((column) => {
        return (
          <a-descriptions-item label={column.label}>
            <OrderCodeLink
              disabled={isSelector}
              orderCode={data[column.value]}
              tag={tag}
              append={data.orderStatusName}
              type={column.useType}
              id={data.refId}
            />
          </a-descriptions-item>
        )
      })}
    </a-descriptions>
  )
}
